<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formatter</title>
    <style>
        body {
            font-size: 12px;
            color: #222;
        }

        div {
            margin: 15px;
        }

        label {
            margin: 5px;
        }

        span {
            border-radius: 2px;
            border: 1px solid #d9d9d9;
            padding: 3px;
        }
    </style>
</head>

<body>
    <div class='case1'><label>yyyy-MM-dd HH:mm:ss</label><span></span></div>
    <div class='case2'><label>yy-MM-dd HH:mm:ss</label><span></span></div>
</body>
<script defer="true" type="text/javascript">
    import("../src/js/formatter.js").then(({ default: JscFormatter }) => {
        let case1 = document.querySelector('.case1');
        case1.querySelector('span').textContent = JscFormatter.date(new Date(), case1.querySelector('label').textContent);

        let case2 = document.querySelector('.case2');
        case2.querySelector('span').textContent = JscFormatter.date(new Date(), case2.querySelector('label').textContent);
    });
</script>

</html>